{% extends "layout.html" %}
{% set active_page = "notes" %}
{% set help_page = ["https://kizniche.github.io/Mycodo/Notes", _('Notes')] %}

{% block title %} - {{_('Notes')}}{% endblock %}

{% block body %}
<!-- Route: /notes -->
<div class="container">
  {% include 'flash_messages.html' %}

  <h4>{{_('Notes')}} <a href="{{help_page[0]}}" target="_blank"><span style="font-size: 16px" class="fas fa-question-circle"></span></a></h4>

  <div style="clear: both; padding: 1em 0;"></div>

  <h3>{{_('Manage')}} {{_('Tags')}}</h3>

  <p>Tags allow categorization of notes. Each note may have one or more tags. A tag may be selected to display all the notes associated with it on a graph.</p>

  <div class="row small-gutters align-items-end">
    <div class="col-auto">
      <form class="form-horizontal" method="post" action="/notes">
      {{form_tag_add.csrf_token}}
      <div class="row align-items-end">
        <div class="col-auto">
          {{form_tag_add.tag_name(class_='form-control')}}
        </div>
        <div class="col-auto">
          {{form_tag_add.tag_add(class_='btn btn-primary')}}
        </div>
      </div>
      </form>
    </div>
  </div>

  {% if tags %}
  <form class="form-horizontal" method="post" action="/notes">
  {{form_tag_options.csrf_token}}

    <div class="row small-gutters align-items-end mt-3">
      <div class="col-auto">
        <select class="selectpicker" id="tag_unique_id" name="tag_unique_id" title="" data-original-title="Select the tag to delete">
          {%- for each_tag in tags -%}
            <option value="{{each_tag.unique_id}}">{{each_tag.name}}</option>
          {%- endfor -%}
        </select>
      </div>
      <div class="col-auto">
        {{form_tag_options.rename(class_='form-control')}}
      </div>
      <div class="col-auto">
        {{form_tag_options.tag_rename(class_='btn btn-primary')}}
      </div>
      <div class="col-auto">
        {{form_tag_options.tag_del(class_='btn btn-primary', **{'onclick':'return confirm("Are you sure you want to delete this?")'})}}
      </div>
    </div>

  </form>

  {% else %}

  <div class="row mt-3">
    <div class="col-auto">
      No Tags found. Create a Tag to begin saving Notes.
    </div>
  </div>

  {% endif %}

  <div style="clear: both; padding: 1em 0;"></div>

  <h3>{{_('Create')}} {{_('Notes')}}</h3>

  <form method="post" action="/notes" enctype=multipart/form-data>
  {{form_note_add.csrf_token}}
  <div class="row small-gutters">
    <div class="col-auto">
      {{form_note_add.name.label(class_='control-label')}}
      <div>
        {{form_note_add.name(class_='form-control')}}
      </div>
    </div>
    <div class="col-auto">
      {{form_note_add.enter_custom_date_time.label(class_='control-label')}}
      <div class="input-group-text">
        <input id="enter_custom_date_time" name="enter_custom_date_time" type="checkbox" value="y">
      </div>
    </div>
    <div class="col-auto">
      {{form_note_add.date_time.label(class_='control-label')}}
      <div>
        {{form_note_add.date_time(class_='form-control', value=current_date_time)}}
      </div>
    </div>
    <div class="col-auto">
      {{form_note_add.files.label(class_='control-label')}}
      <div class="fileinput fileinput-new" data-provides="fileinput">
        <span class="btn btn-sm btn-file"><input id="files" name="files" type="file" multiple="" /></span>
      </div>
    </div>
  </div>
  <div class="row small-gutters">
    <div class="col-12 col-sm-8 col-md-9">
      {{form_note_add.note.label(class_='control-label')}}
      <div>
        {{form_note_add.note(class_='form-control', rows='6')}}
      </div>
    </div>
    <div class="col-12 col-sm-4 col-md-3">
      {{form_note_add.note_tags.label(class_='control-label')}}
      <div>
        <select class="form-control btn-sm" id="note_tags" name="note_tags" style="width: 100%;" size="7" multiple>
        {% if tags %}
          {% for each_tag in tags -%}
          <option value="{{each_tag.unique_id}}">{{each_tag.name}}</option>
          {% endfor -%}
        {% else %}
          <option value="">{{dict_translation['none_available']['title']}}</option>
        {% endif %}
        </select>
      </div>
    </div>
    <div class="col-12">
      {{_('Select one or more tags')}}. {{_('Hold down the <kbd>Ctrl</kbd> or <kbd>&#8984;</kbd> key to select more than one')}}.
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-auto">
      {{form_note_add.note_add(class_='btn btn-primary')}}
    </div>
  </div>

  </form>

  <div style="clear: both; padding: 1em 0;"></div>

  <h3>{{_('Import')}} {{_('Notes')}}</h3>

  <form method="post" action="/notes" enctype=multipart/form-data>
  {{form_note_show.csrf_token}}
  <div class="form-inline">
    <div class="form-group fileinput fileinput-new" data-provides="fileinput">
      <span class="btn btn-sm btn-file"><input id="notes_import_file" name="notes_import_file" type="file" /></span>
    </div>
    <div class="form-group">
      {{form_note_show.notes_import_upload(class_='btn btn-primary')}}
    </div>
  </div>
  </form>

  <div style="clear: both; padding: 1em 0;"></div>

  <h3>{{_('Search')}} {{_('Notes')}}</h3>

  <p>
    Leave all fields empty and click Show Notes to see all notes.
    <br/>Filter Tags: Enter one or more tags, separated by commas, to view the notes with those tags.
    <br/>Filter Notes: Search using "*" as a wildcard (e.g. "*tem*" will return all notes with 'temp' and 'temperature' in the note).
  </p>

  <form method="post" action="/notes" enctype=multipart/form-data>
  {{form_note_add.csrf_token}}
  <div class="row  small-gutters align-items-end">
    <div class="col-auto">
      {{form_note_show.filter_names.label(class_='control-label')}}
      <div>
        {{form_note_show.filter_names(class_='form-control')}}
      </div>
    </div>
    <div class="col-auto">
      {{form_note_show.filter_tags.label(class_='control-label')}}
      <div>
        {{form_note_show.filter_tags(class_='form-control')}}
      </div>
    </div>
    <div class="col-auto">
      {{form_note_show.filter_files.label(class_='control-label')}}
      <div>
        {{form_note_show.filter_files(class_='form-control')}}
      </div>
    </div>
    <div class="col-auto">
      {{form_note_show.filter_notes.label(class_='control-label')}}
      <div>
        {{form_note_show.filter_notes(class_='form-control')}}
      </div>
    </div>
  </div>

  <div class="row small-gutters align-items-end">
    <div class="col-auto">
      {{form_note_show.sort_by.label(class_='control-label')}}
      <div>
        {{form_note_show.sort_by(class_='selectpicker')}}
      </div>
    </div>
    <div class="col-auto">
      {{form_note_show.sort_direction.label(class_='control-label')}}
      <div>
        {{form_note_show.sort_direction(class_='selectpicker')}}
      </div>
    </div>
    <div class="col-auto">
      <div>
        {{form_note_show.notes_show(class_='btn btn-primary')}}
      </div>
    </div>
    <div class="col-auto">
      <div>
        {{form_note_show.notes_export(class_='btn btn-primary')}}
      </div>
    </div>
  </div>
  </form>

  <div style="clear: both; padding: 1em 0;"></div>

 {% if notes %}

  <p>{{_('Found')}}: {{number_displayed_notes[0]}}/{{number_displayed_notes[1]}}</p>

 <div class="table-responsive">
  <table class="table">
    <tr>
      <td></td>
      <td>ID</td>
      <td>Time, Name (Tags)</td>
      <td>Files</td>
      <td>Note</td>
    </tr>

    {% for each_note in notes %}

    <tr>
      <td>
        <form method="post" action="/notes">
        {{form_note_options.csrf_token}}
        {{form_note_options.note_unique_id(value=each_note.unique_id)}}
        <div class="row no-gutters">
          <div class="col-12">
            {{form_note_options.note_mod(class_='btn btn-sm btn-primary')}}
          </div>
          <div class="col-12 mt-1">
            {{form_note_options.note_del(class_='btn btn-sm btn-primary', **{'onclick':'return confirm("Are you sure you want to delete this?")'})}}
          </div>
        </div>
        </form>
      </td>
      <td>{{each_note.id}}</td>
      <td>
        {{utc_to_local_time(each_note.date_time)}}
        <br/>{{each_note.name}} ({% for each_tag in each_note.tags.split(',') %}{{get_note_tag_from_unique_id(each_tag)}}{% if not loop.last %}, {% endif %}{% endfor %})
      </td>
      <td>
      {%- if each_note.files -%}
        {%- for each_file in each_note.files.split(',') -%}
          <a href="/note_attachment/{{each_file}}">{{each_file[37:]}}</a>{% if not loop.last %}, {% endif -%}
        {%- endfor -%}
      {%- endif -%}
      </td>
      <td><pre>{{each_note.note}}</pre></td>
    </tr>

    {% endfor -%}

  </table>
 </div>

  {% else %}

   <p>No notes to display</p>

  {% endif %}

  <div style="clear: both; padding: 0.5em 0;"></div>

</div>

{% endblock %}
